<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13-静态布局</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .square{
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: 1px solid black;
            font-size: 30px;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        .square:focus{
            outline: none;
        }
        .game{
            display: flex;
        }
        ol{
            list-style: none;
        }
        .gameInfo{
            margin-left: 20px;
        }
        #app{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%);
        }
    </style>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
    function Square(props) {
        return (
            <button className="square">
                {props.value}
            </button>
        );
    }

    class Border extends React.Component {
        render() {
            return (
                <div>
                    <div>Next Player: X</div>
                    <div>
                        <Square value="0"/>
                        <Square value="1"/>
                        <Square value="2"/>
                    </div>
                    <div>
                        <Square value="3"/>
                        <Square value="4"/>
                        <Square value="5"/>
                    </div>
                    <div>
                        <Square value="6"/>
                        <Square value="7"/>
                        <Square value="8"/>
                    </div>
                </div>
            );
        }
    }

    class Game extends React.Component {
        render() {
            return(
                <div className="game">
                    <Border />
                    <div className="gameInfo">
                        <ol>
                            <li>step:1</li>
                            <li>step:2</li>
                            <li>step:3</li>
                        </ol>
                    </div>            
                </div>
            );
        }
    }

    ReactDOM.render(
        <Game />,
        document.getElementById("app")
    );
</script>
</html>